<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>代码雨动画</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			width: 100%;
			min-height: 100vh;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<canvas></canvas>
	<script>
		const can = document.querySelector('canvas')
		can.width = window.innerWidth
		can.height = window.innerHeight
		const ctx = can.getContext('2d')
		
		let numArr = Array(parseInt(can.width / 10)).fill(0)

		let random_char = () => { return String.fromCharCode(parseInt(65 + Math.random() * (90 - 65))) }
		
		setInterval(function () {
			ctx.fillStyle = 'rgba(0,0,0,0.09)'
			ctx.fillRect(0, 0, can.width, can.height)
			ctx.fillStyle = "green"
			numArr.forEach((y, i) => {
				ctx.fillText(random_char(), i * 10, y)
				numArr[i] = Math.random() < 0.02 ? 0 : y + 10
			})
		}, 1000 / 10)
	</script>
</body>

</html>